<!-- 账号密码登录页 -->
<template>
	<view class="uni-content">
		<view class="login-logo">
			<image :src="logo"></image>
		</view>
		<!-- 顶部文字 -->
		<view class="top-title-box">
			<view class="title-text">
				<text class="">{{$w('账号密码登录')}}</text>
			</view>
			<view class="right-icon-box">

				<view class="lang-btn" @click="showLangMenu=!showLangMenu">
					<!-- <wjf-iconfont code="e6ee" color="#fff" size="22"></wjf-iconfont> -->
					<uni-icons fontFamily="iconfont" :size="26" color="#777">{{'\ue6ee'}}</uni-icons>
					<text class="lang-btn-text">{{currLang}}</text>
				</view>
				<view class="down-menu" v-if="showLangMenu">
					<template v-for="(item,index) in langMenu" :key="index">
						<view class="lang-item-box" @click="onSeleLang(item)">
							<text>{{item.text}}</text>
						</view>
					</template>
				</view>

			</view>
		</view>

		<uni-forms>
			<uni-forms-item name="username">
				<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
					:inputBorder="false" v-model="username" :placeholder="$w('请输入用户名/手机号/邮箱')" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
					type="password" :inputBorder="false" v-model="password" :placeholder="$w('请输入密码')" />
			</uni-forms-item>
		</uni-forms>
		<uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
		<!-- 带选择框的隐私政策协议组件 -->
		<uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements>
		<button class="uni-btn" type="primary" @click="pwdLogin">{{$w('登录')}}</button>
		<!-- 忘记密码 -->
		<view class="link-box">
			<view v-if="!config.isAdmin">
				<text class="forget">{{$w('忘记了？')}}</text>
				<text class="link" @click="toRetrievePwd">{{$w('初设或重置登录密码')}}</text>
			</view>
			<!-- <text class="link" @click="toRegister">{{config.isAdmin ? '注册管理员账号': '注册账号'}}</text> -->
			<!-- <text class="link" @click="toRegister" v-if="!config.isAdmin">注册账号</text> -->
			<text class="link" @click="toRegister">{{$w('注册账号')}}</text>
			<!-- <text class="link" @click="toLoginSmsCode">短信验证码登录</text> -->
		</view>
		<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->
		<!-- 固定定位的快捷登录按钮 -->
		<view class="fab-login-box">
			<uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
		</view>

	</view>
</template>

<script>
	import message from '../../i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
	// 此处只能是这种形式，否则云端返回的错误信息无法多语言
	const uniIdCo = uniCloud.importObject("uni-id-co", {
		customUI: true,
	})

	export default {
		mixins: [mixin],
		data() {
			return {
				showLangMenu: false,
				langMenu: [{
						text: '中文',
						lang: 'zh-Hans'
					},
					{
						text: 'English',
						lang: 'en'
					},
					{
						text: 'русский язык',
						lang: 'ru'
					},
					{
						text: 'Қазақ тілі',
						lang: 'kk'
					}
				],
				"password": "",
				"username": "",
				"captcha": "",
				"needCaptcha": false,
				"focusUsername": false,
				"focusPassword": false,
				"logo": "/static/logo.png"
			}
		},
		computed: {
			locaLang() {
				return uni.getLocale()
			},
			$w() {
				return $w
			},
			currLang() {
				return this.langMenu.filter(item => item.lang == this.locaLang)[0].text
			},
		},
		onShow() {
			// #ifdef H5
			document.onkeydown = event => {
				var e = event || window.event;
				if (e && e.keyCode == 13) { //回车键的键值为13
					this.pwdLogin()
				}
			};
			// #endif
		},
		methods: {
			test() {
				uniIdCaptchaCo.test().then(res => {
					console.log(res);
				})
			},
			onSeleLang(item) {
				// this.currLang = item.text
				this.showLangMenu = false
				uni.setLocale(item.lang)

			},
			// 页面跳转，找回密码
			toRetrievePwd() {
				let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve'
				//如果刚好用户名输入框的值为手机号码，就把它传到retrieve页面，根据该手机号找回密码
				if (/^1\d{10}$/.test(this.username)) {
					url += `?phoneNumber=${this.username}`
				}
				uni.navigateTo({
					url
				})
			},
			/**
			 * 密码登录
			 */
			pwdLogin() {
				if (!this.password.length) {
					this.focusPassword = true
					return uni.showToast({
						title: this.$w('请输入密码'),
						icon: 'none',
						duration: 3000
					});
				}
				if (!this.username.length) {
					this.focusUsername = true
					return uni.showToast({
						title: this.$w('请输入用户名/手机号/邮箱'),
						icon: 'none',
						duration: 3000
					});
				}
				if (this.needCaptcha && this.captcha.length != 4) {
					this.$refs.captcha.getImageCaptcha()
					return uni.showToast({
						title: this.$w('请输入验证码'),
						icon: 'none',
						duration: 3000
					});
				}

				if (this.needAgreements && !this.agree) {
					return this.$refs.agreements.popup(this.pwdLogin)
				}

				let data = {
					"password": this.password,
					"captcha": this.captcha
				}

				if (/^1\d{10}$/.test(this.username)) {
					data.mobile = this.username
				} else if (/@/.test(this.username)) {
					data.email = this.username
				} else {
					data.username = this.username
				}
				uni.showLoading({
					title: '',
					mask: false
				});
				uniIdCo.login(data).then(e => {
					this.loginSuccess(e)
				}).catch(e => {
					console.log('报错', e.errCode, e.errMsg);
					if (e.errCode == 'uni-id-captcha-required') {
						this.needCaptcha = true
					} else if (this.needCaptcha) {
						//登录失败，自动重新获取验证码
						this.$refs.captcha.getImageCaptcha()
					}
					this.handleErr(e.errMsg)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			/**
			 * 报错信息处理,搜集所有未翻译的信息进行集中处理
			 * @param {Object} errMsg
			 */
			handleErr(errMsg) {
				const errArr = ['图形验证码错误', '验证码已失效', '验证码不可为空', 'deviceId不可为空']
				let msg = ''
				if (errArr.includes(errMsg)) {
					msg = this.$w(errMsg)
				} else {
					msg = errMsg
				}
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			},
			/* 前往注册 */
			toRegister() {
				uni.navigateTo({
					url: this.config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin' :
						'/uni_modules/uni-id-pages/pages/register/register-by-email',
					fail(e) {
						console.error(e);
					}
				})
			},
			// 短信验证码登录
			toLoginSmsCode() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=smsCode',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	@media screen and (min-width: 690px) {
		.uni-content {
			position: relative;
			height: auto;

			// height: 450px;
			// background-color: greenyellow
			.fab-login-box {
				width: 100%;
				text-align: center;
				position: absolute;
				bottom: 10px;
				// background-color: firebrick;
				// padding: 10px;
			}
		}
	}

	// @font-face {
	// 	font-family: iconfont;
	// 	src: url('./iconfont.ttf');
	// }

	.top-title-box {
		padding: 18px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title-text {
			font-weight: 800;
			color: #555;
			line-height: 1.05;
		}
	}

	.right-icon-box {
		position: relative;
		display: flex;

		// background-color: greenyellow;
		.lang-btn {
			// position: absolute;
			top: 10rpx;
			right: 6rpx;
			width: 200rpx;
			height: 40rpx;
			// background-color: green;
			display: flex;
			align-items: center;
			cursor: pointer;

			.lang-btn-text {
				flex: 1;
				text-align: center;
				margin-left: 4rpx;
				font-size: 24rpx;
				font-weight: 600;
				line-height: 1.05;
				color: #555;
			}
		}
	}

	.down-menu {
		position: absolute;
		top: 50rpx;
		left: 6rpx;
		padding: 8rpx 20rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 1.05;
		border-radius: 4rpx;
		background-color: rgba(160, 160, 160, 0.9);
		z-index: 99;
		cursor: pointer;

		.lang-item-box {
			margin: 20rpx 0;

		}
	}

	.forget {
		font-size: 12px;
		color: #8a8f8b;
	}

	.link-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}

	.link {
		font-size: 12px;
	}
</style>